<style scoped lang="less">
  .container {
    background-color: white;
    padding: 2vw;
    font-size: 0.35rem;
  }

  .goods-info {
    display: flex;
    flex-wrap: nowrap;
  }

  .goods-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .goods-title {
    font-size: 0.4rem;
    color: #2c3e50;
    line-height: 1.3;
    min-height: 1rem;
  }

  .goods-img {
    width: 20vw;
    height: 20vw;
    margin-right: 2vw;
  }

  .goods-price-wrap {
    display: flex;
    color: @--price;
    justify-content: space-between;
  }

  span.symbol {
    font-size: 0.3rem;
  }

  .price-content {
    font-size: 0.4rem;
  }

  .price-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  span.price-title {
    color: @--gray;
  }

  .current-price {
    text-align: right;
    color: @--price;
  }

  .current-price {
    text-align: right;
  }

  .op-wrap {
    margin-top: 2vh;
    text-align: right;
  }

  button.op-btn {
    margin: 1vw;
  }

  .status-wrap {
    display: flex;
    justify-content: space-between;
  }

  .status {
    color: @--gray;
  }
</style>
<template>
  <div class="container" v-if="orderData!=null">
    <div class="goods-info" @click="toGoodsDetail">
      <img class="goods-img" :src="GLOBAL.getUrl(orderData.goods_img,true)">
      <div class="goods-content">
        <div class="goods-title">{{orderData.goods_title}}</div>
        <div class="goods-price-wrap">
          <div class="price-wrap">
            <span class="price-title">原价:</span>
            <span class="symbol">￥</span>
            <span class="price-content">{{orderData.original_price/100}}</span>
          </div>
          <div class="price-wrap">
            <span class="price-title">底价:</span>
            <span class="symbol">￥</span>
            <span class="price-content">{{orderData.lowest_price/100}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="current-price">
      <span class="price-title">已砍至:</span>
      <span class="symbol">￥</span>
      <span class="price-content">{{orderData.current_price/100}}</span>
    </div>
    <div class="status-wrap">
      <div class="status" v-if="orderData.order_id!==null">
        <span v-if="orderData.order.trade_status===GLOBAL.ORDER_STATUS_NORMAL && orderData.order.pay_status===GLOBAL.PAY_STATUS_PAID_ONLINE">
          待使用
        </span>
        <span v-else-if="orderData.order.trade_status===GLOBAL.ORDER_STATUS_USED">
          {{orderData.order.has_comment===1?'已评价':'已使用'}}
        </span>
      </div>
      <div class="status" v-else>
        <span v-if="orderData.is_lowest===1">
          已到底价
        </span>
      </div>
      <div class="op-wrap">
        <van-button
          v-if="orderData.status===GLOBAL.KJ_ORDER_STATUS_NORMAL&&(orderData.order_id===null||(orderData.order_id!=null&&orderData.order.trade_status===GLOBAL.ORDER_STATUS_CLOSE))"
          class="op-btn btn-create-order" type="primary" @click="toSubmit" size="mini">购买
        </van-button>
        <van-button
          v-if="orderData.status===GLOBAL.KJ_ORDER_STATUS_NORMAL&&orderData.order_id!==null && orderData.order.trade_status===GLOBAL.ORDER_STATUS_NORMAL && orderData.order.pay_status===GLOBAL.PAY_STATUS_UN_PAY_ONLINE"
          class="op-btn btn-pay" @click="toPay" type="info" size="mini">支付
        </van-button>
        <van-button
          v-if="orderData.order_id!==null && orderData.order.trade_status===GLOBAL.ORDER_STATUS_NORMAL && orderData.order.pay_status===GLOBAL.PAY_STATUS_UN_PAY_ONLINE"
          class="op-btn btn-close" type="default" @click="toClose" size="mini">关闭
        </van-button>
        <van-button
          v-if="orderData.order_id!==null && orderData.order.trade_status===GLOBAL.ORDER_STATUS_NORMAL && orderData.order.pay_status===GLOBAL.PAY_STATUS_PAID_ONLINE"
          class="op-btn btn-check-code" @click="toCheckCode" plain type="primary" size="mini">核销
        </van-button>
        <van-button
          v-if="orderData.order_id!==null && orderData.order.trade_status===GLOBAL.ORDER_STATUS_USED&&orderData.order.has_comment===0"
          class="op-btn btn-check-code" @click="toComment" plain type="primary" size="mini">评价
        </van-button>

      </div>

    </div>
  </div>
</template>
<script>

  import {getKanJiaOrder, close} from '../../api/kanjia'
  import Vue from 'vue';
  import {Button} from 'vant';

  Vue.use(Button);
  export default {
    name: 'kj-order-detail',
    data() {
      return {
        order_id: null,
        orderData: null
      }
    },
    created() {
      this.order_id = this.$route.params.order_id;
      this.getOrderData();
    },
    methods: {
      getOrderData() {
        let vm = this;
        getKanJiaOrder(vm.order_id).then(rep => {
          vm.orderData = rep.data.data;
        })
      },
      toGoodsDetail() {
        let params = {id: this.orderData.goods_id};
        this.$router.push({name: 'goodsdetail', params: params});
      },
      toSubmit() {
        let params = {id: this.orderData.goods_id, skuid: this.orderData.sku_id};
        let query = {kanjia_order_id: this.orderData.id};
        this.$router.push({name: 'submit', params: params, query: query});
      },
      toPay() {
        this.$router.push({name: 'pay', params: {order_id: this.orderData.order_id}});
      },
      toClose() {
        let vm = this;
        close(this.orderData.id).then(rep => {
          vm.getOrderData();
        });
      },
      toCheckCode() {
        this.$router.push({name: 'order-code', params: {order_id: this.orderData.order_id}});
      },
      toComment() {
        this.$router.push({name: 'order-comment', params: {order_id: this.orderData.order_id}});
      }
    }
  }
</script>